<script setup>
import { onMounted, ref } from 'vue'
import Page from '@/components/Page.vue'
// import * as echarts from 'echarts'

const prop = defineProps({
    weekStats: Array,
    highIp:Array
})
const counter = prop.weekStats.map((e) => e.cnt)

const time_chart = ref()
onMounted(async () => {
    const timeDom = await time_chart.value
    // eslint-disable-next-line no-undef
    var myChart = echarts.init(timeDom)

    // 指定图表的配置项和数据
    var option = {
        color: ["#2f89cf"],
        grid: {
            left: "0%",
            top: "10%",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['一','二','三','四','五','六','七'],
            axisLabel: {
                color: "rgb(197,199,206)",
                fontSize: "12"
            },
            //  x轴样式不显示
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(197,199,206)'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: "rgb(197,199,206)",
                fontSize: "12"
            },
            splitLine: {
                lineStyle: {
                    type: 'bashed'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
        },
        series: [
            {
                name: '访问人数',
                data: counter,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgb(239,243,253)'
                },
                barWidth: "20%",
                color: 'rgb(52,100,224)',
                itemStyle: {
                    // 修改柱子圆角
                    barBorderRadius: 10
                }
            }
        ],toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})
</script>

<template>
    <div class="Time">
        <Page title="高频访问IP" class="highIP">
            <ul>
                <li v-for="i in prop.highIp" :key="i"><span>{{ i.ip }}</span><span>{{ i.cnt }}次</span></li>
            </ul>
        </Page>
        <Page title="周访问分布" class="week">
            <template #default>
                <div ref="time_chart" class="time_chart" style="width: 100%;height: 250px;"></div>
            </template>
        </Page>
    </div>
</template>

<style lang="scss" scoped>
.Time{
    display: flex;
    justify-content: space-between;
    .highIP{
        width: 40%;
        margin-right: 10px;
        ul{
            li{
                height: 40px;
                align-items: center;
                display: flex;
                justify-content: space-between;
                span:first-child{
                    font-weight: 600;
                    color: rgb(71,115,227);
                }
            }
        }
    }
    .week{
        width: 40%;
    }
}
</style>